<template>
  <div style="position: absolute;width: 100%;height: 100%;">
    <div style="height: 8%;">
      <van-search v-model="value" show-action placeholder="我想搜索" ref="search" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>

    <div id="main">
      <span class="font">按类型搜索</span>
      <div class="types">
        <div id="study" class="type" @click="setValue('学习')">学习</div>
        <div id="life" class="type" @click="setValue('生活')">生活</div>
        <div id="game" class="type" @click="setValue('游戏')">游戏</div>
        <div id="entertainment" class="type" @click="setValue('娱乐')">娱乐</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

const value = ref('')

const search = ref(null);

onMounted(() => {
  if (search.value !== null){
    search.value.$el.querySelector('input').focus();
  }
})

const onSearch = () => {
  console.log("执行搜索...")
}

const setValue = (content: string) => {
  value.value = content
  onSearch()
}
</script>

<style scoped>
.font {
  font-size: 10px;
  position: absolute;
  left: 5%;
  top: 10%;
  color: #c8c9cc;
  font-weight: bold;
}
.types{
  position: absolute;
  top: 15%;
  width: 100%;
  display: inline-flex;
}
.type{
  margin-left: 20px;
  font-size: 14px;
  border: 0 solid #c8c9cc;
  background-color: #f7f8fa;
  color: #c8c9cc;
  width: 18%;
  height: 25px;
  text-align: center;
  line-height: 25px
}
</style>